<template>
  <div ref="playerRef"></div>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount} from 'vue'
import APlayer from 'aplayer'
import 'aplayer/dist/APlayer.min.css'

const playerRef = ref()

const props = defineProps({
  album: {
    type: Object,
    required: true,
  },
})

let ap 
onMounted(() => {
  ap = new APlayer({
    container: playerRef.value,
    audio: [{
        name: props.album.name,
        artist: '',
        url: props.album.url,
        mutex: true,
        cover: ''
    }]
  })
})

onBeforeUnmount(() => {
  ap.destroy()
})

</script>

<style lang="scss" scoped></style>
